<template>
  <div>
    <a-drawer
      :open="props.open"
      title="详情"
      placement="right"
      @close="handleClose"
      width="800px"
    >
      <div class="flex items-center">
        <span style="font-size: 16px; color: #020817">房间信息</span>
        <a-button
          type="primary"
          :icon="h(ScheduleFilled)"
          class="ml-3"
          @click="handleChangeRecord"
          >用户信息修改记录</a-button
        >
      </div>
      <a-divider />
      <a-form
        :label-col="labelCol"
        :disabled="isForm"
        :model="formSate"
        layout="inline"
      >
        <a-form-item label="子公司">
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.regionId"
          />
        </a-form-item>
        <a-form-item label="小区名称">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.village"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.village"
          />
        </a-form-item>
        <a-form-item label="楼栋">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.building"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.building"
          />
        </a-form-item>
        <a-form-item label="单元">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.unit"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.unit"
          />
        </a-form-item>
        <a-form-item label="楼层">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.floor"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.floor"
          />
        </a-form-item>
        <a-form-item label="热力卡号">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.alipayConsNo"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.alipayConsNo"
          />
        </a-form-item>
        <a-form-item label="房名">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.houseNumber"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.houseNumber"
          />
        </a-form-item>
        <a-form-item label="房号">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.house"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            v-model:value="formSate.house"
            :disabled="!isEdit||isForm"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item label="联系人">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.linkman"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            v-model:value="formSate.linkman"
            :disabled="!isEdit||isForm"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item label="联系电话">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.holdPhone"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            v-model:value="formSate.holdPhone"
            :disabled="!isEdit||isForm"
            style="width: 200px"
          />
        </a-form-item>
        <a-form-item label="住户姓名">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.holder"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.holder"
          />
        </a-form-item>
        <a-form-item label="性别">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.sex"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select
            ref="select"
            v-model:value="formSate.sex"
            style="width: 200px"
          >
            <a-select-option value="男">男</a-select-option>
            <a-select-option value="女">女</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="入网时间">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.netDate"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-date-picker
            v-model:value="formSate.netDate"
            style="width: 200px"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </a-form-item>
        <a-form-item label="末端类型">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.terminalType"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select
            ref="select"
            v-model:value="formSate.terminalType"
            style="width: 200px"
          >
            <a-select-option value="散热器">散热器</a-select-option>
            <a-select-option value="地暖">地暖</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="阀门类型">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.valveType"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select
            ref="select"
            v-model:value="formSate.valveType"
            style="width: 200px"
          >
            <a-select-option value="手动阀">手动阀</a-select-option>
            <a-select-option value="电动阀">电动阀</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="楼梯类型">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.elevatorType"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select
            ref="select"
            v-model:value="formSate.elevatorType"
            style="width: 200px"
          >
            <a-select-option value="电梯">电梯</a-select-option>
            <a-select-option value="楼梯">楼梯</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="入住状态">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.checkIn"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select
            ref="select"
            v-model:value="formSate.checkIn"
            style="width: 200px"
          >
            <a-select-option value="已入住">已入住</a-select-option>
            <a-select-option value="未入住">未入住</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="供热状态">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.heatStatus"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select
            ref="select"
            v-model:value="formSate.heatStatus"
            style="width: 200px"
          >
            <a-select-option value="正常供热">正常供热</a-select-option>
            <a-select-option value="停止供热">停止供热</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="房屋属性">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.houseProperty"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select
            ref="select"
            v-model:value="formSate.houseProperty"
            style="width: 200px"
          >
            <a-select-option value="住宅">住宅</a-select-option>
            <a-select-option value="商业">商业</a-select-option>
            <a-select-option value="办公">办公</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="名单类型">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.listType"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select
            ref="select"
            v-model:value="formSate.listType"
            style="width: 200px"
          >
            <a-select-option value="普通用户">普通用户</a-select-option>
            <a-select-option value="VIP用户">VIP用户</a-select-option>
            <a-select-option value="特殊用户">特殊用户</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="工作单位">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.workUnit"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.workUnit"
          />
        </a-form-item>
        <a-form-item label="房产号码">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.propertyNumber"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.propertyNumber"
          />
        </a-form-item>
        <a-form-item label="证件类型">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.cardType"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select v-model:value="formSate.cardType" style="width: 200px">
            <a-select-option value="身份证">身份证</a-select-option>
            <a-select-option value="护照">护照</a-select-option>
            <a-select-option value="军官证">军官证</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="证件号码">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.IDCard"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.IDCard"
          />
        </a-form-item>
        <a-form-item label="预收款账户">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.prepaidAccount"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.prepaidAccount"
          />
        </a-form-item>
        <a-form-item label="公众号绑定手机号">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.weChatPhone"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.weChatPhone"
          />
        </a-form-item>
        <a-form-item label="用户标签">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.houseRemarkName"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-select
            :options="userLabel"
            style="width: 200px"
            v-model:value="formSate.houseRemarkName"
          />
        </a-form-item>
        <a-form-item label="物业电话">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.eastateTel"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-input style="width: 200px" v-model:value="formSate.eastateTel" />
        </a-form-item>
        <a-form-item label="备注">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.remark"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-textarea
            v-model:value="formSate.remark"
            placeholder="请输入备注"
            style="width: 570px"
            :rows="4"
          />
        </a-form-item>
        <a-form-item label="分区">
          <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.partition"
              class="mr-2"
            ></a-checkbox>
          </template>
          <a-input style="width: 200px" v-model:value="formSate.partition" />
        </a-form-item>
        <a-form-item label="其他号码">
          <!-- <template v-if="!isEdit && !isForm">
            <a-checkbox
              v-model:checked="selectedFields.otherPhone"
              class="mr-2"
            ></a-checkbox>
          </template> -->
          <a-input
            style="width: 200px"
            :disabled="!isEdit||isForm"
            v-model:value="formSate.otherPhone"
          />
        </a-form-item>
      </a-form>
      <div class="flex items-center">
        <span style="font-size: 16px; color: #020817">面积信息</span>
        <a-button
          type="primary"
          :icon="h(ScheduleFilled)"
          class="ml-3"
          @click="handleChangeRecord2"
          >面积信息修改记录</a-button
        >
      </div>
      <a-divider />
      <div>
        <a-table
          :columns="columns"
          :data-source="tableData"
          :pagination="false"
          :scroll="{ x: 1000 }"
        >
          <template #bodyCell="{ column, record }">
            <div v-if="column.key === 'active'">
              <a-button
                type="link"
                @click="openValve(record)"
                :disabled="record.valveStatus === '开阀'"
                >开阀</a-button
              >
              <a-button
                type="link"
                @click="closeValve(record)"
                :disabled="record.valveStatus === '关阀'"
                >关阀</a-button
              >
              <a-button type="link" @click="editArea(record)">修改</a-button>
              <a-popconfirm
                placement="bottom"
                title="确定要删除吗？"
                ok-text="是"
                cancel-text="否"
                @confirm="confirmDelete(record)"
              >
                <a-button type="link" danger v-if="props.auth.delets == 1"
                  >删除</a-button
                >
              </a-popconfirm>
            </div>
          </template>
        </a-table>
      </div>
      <div class="mt-3 flex">
        <span style="font-size: 16px; color: #020817">合同信息</span>
      </div>
      <a-divider />
      <div>
        <span style="font-size: 14px; color: #323639">暂无合同信息</span>
      </div>
      <template #footer>
        <a-space v-if="isForm">
          <a-button
            type="primary"
            :icon="h(EditFilled)"
            @click="
              () => {
                isEdit = true;
                isForm = false;
                resetSelectedFields();
              }
            "
            v-if="props.auth.updates == 1"
            >修改</a-button
          >
          <a-button
            type="primary"
            :icon="h(EditFilled)"
            @click="
              () => {
                isEdit = false;
                isForm = false;
                resetSelectedFields();
              }
            "
            v-if="props.auth.updates == 1"
            >批量修改</a-button
          >
        </a-space>
        <a-space v-if="!isForm">
          <a-button type="primary" @click="onsubmit">提交</a-button>
          <a-button
            @click="
              () => {
                isForm = true;
                handleClose();
              }
            "
            >取消</a-button
          >
        </a-space>
      </template>
    </a-drawer>
    <a-modal
      title="面积信息"
      :visible="visible"
      @ok="submitArea"
      @cancel="visible = false"
    >
      <a-form layout="inline" :model="areaForm" :label-col="labelCol">
        <a-form-item label="面积名称">
          <a-input v-model:value="areaForm.areaName" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="建筑面积">
          <a-input v-model:value="areaForm.buildingArea" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="住户类型">
          <a-select v-model:value="areaForm.houseType">
            <a-select-option value="居民">居民</a-select-option>
            <a-select-option value="非居民">非居民</a-select-option>
            <a-select-option value="办公">办公</a-select-option>
            <a-select-option value="经营">经营</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="收费面积">
          <a-input v-model:value="areaForm.feeArea" placeholder="请输入" />
        </a-form-item>
        <a-form-item label="阀门厂家">
          <a-input
            v-model:value="areaForm.valveManufacturer"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item label="实供面积">
          <a-input
            v-model:value="areaForm.actualSuppliedArea"
            placeholder="请输入"
          />
        </a-form-item>
        <a-form-item label="阀门状态">
          <a-select v-model:value="areaForm.valveStatus">
            <a-select-option value="开阀">开阀</a-select-option>
            <a-select-option value="关阀">关阀</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="阀门编号">
          <a-input v-model:value="areaForm.valveNumber" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      :visible="changeRecord"
      title="修改记录"
      :footer="null"
      width="1200px"
      @cancel="changeRecord = false"
    >
      <a-table
        :columns="columns1"
        :data-source="changeRecordData"
        :pagination="pagination"
      />
    </a-modal>
    <a-modal
      :visible="changeRecord2"
      title="修改记录"
      :footer="null"
      width="1200px"
      @cancel="changeRecord2 = false"
    >
      <a-table
        :columns="columns2"
        :data-source="changeRecordData2"
        :pagination="pagination2"
      />
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { h, ref, reactive, onMounted, watch } from 'vue';
import { EditFilled, ScheduleFilled } from '@ant-design/icons-vue';
// import { updateUser } from '#/api';
import {
  getRoomBatchOperation_fours,
  getRoomBatchOperation_four,
  getRoomBatchOperation_five,
  getRoomBatchOperation_six,
  getRoomBatchOperation_seven,
  getRoomBatchOperation_eight,
  getRoomBatchOperation_nine,
  getRoomBatchOperation_ten,
  getHouseholdChangeRecordApi,
  getAreaChangeRecordApi,
} from '#/api';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';
interface Props {
  selectedType: string;
  data: any;
  open: boolean;
  auth: Record<string, any>;
}

const props = defineProps<Props>();
const formSate = ref({
  // 基础地址信息
  province: '', // 小区所属省
  city: '', // 小区所属市
  county: '', // 小区所属区
  village: '', // 小区
  building: '', // 楼栋
  unit: '', // 单元
  house: '', // 房号
  houseNumber: '', // 房名

  // ID信息
  regionId: null, // 子公司id
  villageID: null, // 小区id
  buildingID: null, // 楼栋id
  buildingIsUpdate: '', // 楼栋是否修改
  unitID: null, // 单元id
  unitIsUpdate: '', // 单元是否修改
  houseId: null, // 房间id

  // 用户信息
  holder: '', // 住户姓名
  alipayConsNo: '', // 热力卡号/房间编号
  sex: '', // 性别
  houseRemark: '', // 用户标签id
  houseRemarkName: '', // 用户标签名称
  checkIn: '', // 入住状态

  // 面积信息
  buildingArea: null, // 建筑面积
  actualSuppliedArea: null, // 实供面积
  feeArea: null, // 收费面积

  // 其他房屋信息
  elevatorType: '', // 楼梯类型
  valveType: '', // 阀门类型
  terminalType: '', // 末端类型
  heatStatus: '', // 供热状态
  houseProperty: '', // 房屋属性
  listType: '', // 名单类型
  floor: '', // 楼层
  netDate: '', // 入网时间

  // 联系信息
  linkman: '', // 联系人
  holdPhone: '', // 联系电话
  otherPhone: '', // 其他电话

  // 详细信息
  workUnit: '', // 工作单位
  cardType: '', // 证件类型
  IDCard: '', // 证件号码
  propertyNumber: '', // 房产号码
  eastateTel: '', // 物业电话
  weChatPhone: '', // 公众号绑定手机号
  partition: '', // 分区
  agreementMsg: '', // 合同信息
  remark: '', // 备注
});
const areaForm = ref({
  areaName: '',
  buildingArea: '',
  houseType: '',
  feeArea: '',
  valveManufacturer: '',
  actualSuppliedArea: '',
  valveStatus: '',
  valveNumber: '',
});
const visible = ref(false);
// const formSate = ref({});
const userLabel = ref([]);
const getUserLabel = () => {
  getRoomBatchOperation_five().then((res: any) => {
    console.log(res);
    userLabel.value = res.data.data.map((item) => {
      return {
        label: item.title,
        value: item.id,
      };
    });
  });
};
getUserLabel();
// 用于存储批量编辑时选中的字段
const selectedFields = reactive({
  // 基础地址信息
  province: false, // 小区所属省
  city: false, // 小区所属市
  county: false, // 小区所属区
  village: false, // 小区
  building: false, // 楼栋
  unit: false, // 单元
  house: false, // 房号
  houseNumber: false, // 房名

  // ID信息
  regionId: false, // 子公司id
  villageID: false, // 小区id
  buildingID: false, // 楼栋id
  buildingIsUpdate: false, // 楼栋是否修改
  unitID: false, // 单元id
  unitIsUpdate: false, // 单元是否修改
  houseId: false, // 房间id

  // 用户信息
  holder: false, // 住户姓名
  alipayConsNo: false, // 热力卡号/房间编号
  sex: false, // 性别
  houseRemark: false, // 用户标签id
  houseRemarkName: false, // 用户标签名称
  checkIn: false, // 入住状态

  // 面积信息
  buildingArea: false, // 建筑面积
  actualSuppliedArea: false, // 实供面积
  feeArea: false, // 收费面积

  // 其他房屋信息
  elevatorType: false, // 楼梯类型
  valveType: false, // 阀门类型
  terminalType: false, // 末端类型
  heatStatus: false, // 供热状态
  houseProperty: false, // 房屋属性
  listType: false, // 名单类型
  floor: false, // 楼层
  netDate: false, // 入网时间

  // 联系信息
  linkman: false, // 联系人
  holdPhone: false, // 联系电话
  otherPhone: false, // 其他电话

  // 详细信息
  workUnit: false, // 工作单位
  cardType: false, // 证件类型
  IDCard: false, // 证件号码
  propertyNumber: false, // 房产号码
  eastateTel: false, // 物业电话
  weChatPhone: false, // 公众号绑定手机号
  partition: false, // 分区
  agreementMsg: false, // 合同信息
  remark: false, // 备注
});

// 重置选中的字段
const resetSelectedFields = () => {
  Object.keys(selectedFields).forEach((key) => {
    (selectedFields as any)[key] = false;
  });
};

watch(
  () => props.data,
  (newVal) => {
    console.log('newVal', newVal);
    // 确保newVal是一个数组，并且长度大于0，然后将其赋值给formSate.value
    if (newVal) {
      getRoomBatchOperation_six(newVal.houseId).then((res) => {
        // 将 res.data.data 中的所有字段赋值到 formSate.value
        // formSate.value = res.data.data;
        // 确保以下字段都存在于 formSate.value 中，如果不存在则设置默认值
        // 基础地址信息
        formSate.value.province = res.data.data.province ?? ''; // 小区所属省
        formSate.value.city = res.data.data.city ?? ''; // 小区所属市
        formSate.value.county = res.data.data.county ?? ''; // 小区所属区
        formSate.value.village = res.data.data.village ?? ''; // 小区
        formSate.value.building = res.data.data.building ?? ''; // 楼栋
        formSate.value.unit = res.data.data.unit ?? ''; // 单元
        formSate.value.house = res.data.data.house ?? ''; // 房号
        formSate.value.houseNumber = res.data.data.houseNumber ?? ''; // 房名

        // ID信息
        formSate.value.regionId = res.data.data.regionId ?? null; // 子公司id
        formSate.value.villageID = res.data.data.villageID ?? null; // 小区id
        formSate.value.buildingID = res.data.data.buildingID ?? null; // 楼栋id
        formSate.value.buildingIsUpdate = res.data.data.buildingIsUpdate ?? ''; // 楼栋是否修改
        formSate.value.unitID = res.data.data.unitID ?? null; // 单元id
        formSate.value.unitIsUpdate = res.data.data.unitIsUpdate ?? ''; // 单元是否修改
        formSate.value.houseId = res.data.data.houseId ?? null; // 房间id

        // 用户信息
        formSate.value.holder = res.data.data.holder ?? ''; // 住户姓名
        formSate.value.alipayConsNo = res.data.data.alipayConsNo ?? ''; // 热力卡号/房间编号
        formSate.value.sex = res.data.data.sex ?? ''; // 性别
        formSate.value.houseRemark = res.data.data.houseRemark ?? ''; // 用户标签id
        formSate.value.houseRemarkName = res.data.data.houseRemarkName ?? ''; // 用户标签名称
        formSate.value.checkIn = res.data.data.checkIn ?? ''; // 入住状态

        // 面积信息
        formSate.value.buildingArea = res.data.data.buildingArea ?? null; // 建筑面积
        formSate.value.actualSuppliedArea =
          res.data.data.actualSuppliedArea ?? null; // 实供面积
        formSate.value.feeArea = res.data.data.feeArea ?? null; // 收费面积

        // 其他房屋信息
        formSate.value.elevatorType = res.data.data.elevatorType ?? ''; // 楼梯类型
        formSate.value.valveType = res.data.data.valveType ?? ''; // 阀门类型
        formSate.value.terminalType = res.data.data.terminalType ?? ''; // 末端类型
        formSate.value.heatStatus = res.data.data.heatStatus ?? ''; // 供热状态
        formSate.value.houseProperty = res.data.data.houseProperty ?? ''; // 房屋属性
        formSate.value.listType = res.data.data.listType ?? ''; // 名单类型
        formSate.value.floor = res.data.data.floor ?? ''; // 楼层
        // 处理入网时间，确保它是有效的日期格式或为空
        formSate.value.netDate = res.data.data.netDate
          ? dayjs(res.data.data.netDate).format('YYYY-MM-DD')
          : ''; // 入网时间

        // 联系信息
        formSate.value.linkman = res.data.data.linkman || ''; // 联系人
        formSate.value.holdPhone = res.data.data.holdPhone || ''; // 联系电话
        formSate.value.otherPhone = res.data.data.otherPhone || ''; // 其他电话

        // 详细信息
        formSate.value.workUnit = res.data.data.workUnit ?? ''; // 工作单位
        formSate.value.cardType = res.data.data.cardType ?? ''; // 证件类型
        formSate.value.IDCard = res.data.data.IDCard ?? ''; // 证件号码
        formSate.value.propertyNumber = res.data.data.propertyNumber ?? ''; // 房产号码
        formSate.value.eastateTel = res.data.data.eastateTel ?? ''; // 物业电话
        formSate.value.weChatPhone = res.data.data.weChatPhone ?? ''; // 公众号绑定手机号
        formSate.value.partition = res.data.data.partition ?? ''; // 分区
        formSate.value.agreementMsg = res.data.data.agreementMsg ?? ''; // 合同信息
        formSate.value.remark = res.data.data.remark ?? ''; // 备注
        // console.log(res)
        tableData.value = res.data.data.areaDetailArray;
      });
      getRoomBatchOperation_nine({
        page: 1,
        limit: 999,
        houseID: newVal.houseId,
      }).then((res: any) => {
        if (res.data.code === 200) {
          // 合同查询
          // message.success('查询成功!');
        } else {
          message.error(res.message || '合同查询失败!');
        }
      });
    }
    console.log(formSate.value);
  },
);
const isForm = ref(true);
const isEdit = ref(false);
const labelCol = { style: { width: '120px' } };
const columns = [
  {
    title: '面积名称',
    dataIndex: 'areaName',
    key: 'areaName',
    algin: 'center',
  },
  {
    title: '住户类型',
    dataIndex: 'houseType',
    key: 'houseType',
    algin: 'center',
  },
  {
    title: '建筑面积',
    dataIndex: 'buildingArea',
    key: 'buildingArea',
    algin: 'center',
  },
  {
    title: '收费面积',
    dataIndex: 'feeArea',
    key: 'feeArea',
    algin: 'center',
  },
  {
    title: '实供面积',
    dataIndex: 'actualSuppliedArea',
    key: 'actualSuppliedArea',
    algin: 'center',
  },
  {
    title: '阀门厂家',
    dataIndex: 'valveManufacturer',
    key: 'valveManufacturer',
    algin: 'center',
  },
  {
    title: '操作',
    dataIndex: 'active',
    key: 'active',
    algin: 'center',
    width: 250,
  },
];
const tableData = ref([]);
const emit = defineEmits(['handleClose', 'refreshData']);
const handleClose = () => {
  emit('handleClose');
};
const onsubmit = () => {
  if (isEdit.value) {
    const data = {
      ...formSate.value,
      regionId: props.data.regionId,
      applicationReason: props.data.applicationReason,
      attachmentLocation: props.data.attachmentLocation,
      operateObject: props.data.operateObject,
    };
    // 单独修改逻辑
    getRoomBatchOperation_fours(data).then((res) => {
      console.log('单独修改', res);
      if (res.data.code === 200) {
        message.success('修改成功');
        isForm.value = true;
        emit('refreshData'); // 通知父组件刷新数据
        handleClose();
      } else {
        message.error(res || '修改失败!');
      }
    });
  } else {
    // 批量修改逻辑
    // 创建一个只包含选中字段的对象
    const selectedData: any = {};
    Object.keys(selectedFields).forEach((key) => {
      if ((selectedFields as any)[key]) {
        selectedData[key] = (formSate.value as any)[key];
      }
    });

    // 检查是否有选中的字段
    if (Object.keys(selectedData).length === 0) {
      message.warning('请至少选择一个要修改的字段');
      return;
    }

    // 这里需要实现批量修改的API调用
    console.log('批量修改的数据', selectedData);
    const data = {
      ...selectedData,
      regionId: props.data.regionId,
      applicationReason: props.data.applicationReason,
      attachmentLocation: props.data.attachmentLocation,
      operateObject: props.data.operateObject,
    };
    // 示例：调用批量修改API
    getRoomBatchOperation_four(data).then((res) => {
      if (res.data.code === 200) {
        message.success('批量修改成功!');
        isForm.value = true;
        emit('refreshData'); // 通知父组件刷新数据
        handleClose();
      } else {
        message.error(res.message || '批量修改失败!');
      }
    });

    // 临时提示，实际项目中应替换为真实API调用
    message.success('批量修改功能已触发，请实现对应的API');
    isForm.value = true;
    handleClose();
  }
};
const openValve = (e: any) => {
  getRoomBatchOperation_seven(e.areaDetailId, '开阀').then((res) => {
    if (res.data.code === 200) {
      message.success('开阀成功!');
    } else {
      message.error(res.message || '开阀失败!');
    }
  });
};
const closeValve = (e: any) => {
  getRoomBatchOperation_seven(e.areaDetailId, '关阀').then((res) => {
    if (res.data.code === 200) {
      message.success('关阀成功!');
    } else {
      message.error(res.message || '关阀失败!');
    }
  });
};
const confirmDelete = (e: any) => {
  getRoomBatchOperation_eight(e.operateObject).then((res: any) => {
    if (res.data.code === 200) {
      message.success('删除成功!');
    } else {
      message.error(res.message || '删除失败!');
    }
  });
};
const areaId = ref('');
const editArea = (record: any) => {
  console.log(record);
  areaForm.value.areaName = record.areaName;
  areaForm.value.buildingArea = record.buildingArea;
  areaForm.value.houseType = record.houseType;
  areaForm.value.feeArea = record.feeArea;
  areaForm.value.valveManufacturer = record.valveManufacturer;
  areaForm.value.actualSuppliedArea = record.actualSuppliedArea;
  areaForm.value.valveStatus = record.valveStatus;
  areaForm.value.valveNumber = record.valveNumber;
  areaId.value = record.areaDetailId;
  visible.value = true;
};
const submitArea = () => {
  getRoomBatchOperation_ten({
    ...areaForm.value,
    areaDetailId: areaId.value,
  }).then((res: any) => {
    console.log(res);
    if (res.data.code === 200) {
      message.success('修改成功!');
      visible.value = false;
    } else {
      message.error(res.message || '修改失败!');
    }
  });
};
const changeRecord = ref(false);
const changeRecordData = ref([]);
const columns1 = [
  {
    title: '子公司',
    dataIndex: 'comNameLevel5',
    align: 'center',
  },
  {
    title: '区域',
    dataIndex: 'county',
    align: 'center',
  },
  {
    title: '小区名称',
    dataIndex: 'village',
    align: 'center',
  },
  {
    title: '楼栋',
    dataIndex: 'building',
    align: 'center',
  },
  {
    title: '单元',
    dataIndex: 'unit',
    align: 'center',
  },
  {
    title: '房间号',
    dataIndex: 'house',
    align: 'center',
  },
  {
    title: '热力卡号',
    dataIndex: 'alipayConsNo',
    align: 'center',
  },
  {
    title: '住户名称',
    dataIndex: 'holder',
    align: 'center',
  },
  {
    title: '入户状态',
    dataIndex: 'checkIn',
    align: 'center',
  },
  {
    title: '收费面积',
    dataIndex: 'feeArea',
    align: 'center',
  },
  {
    title: '名单类型',
    dataIndex: 'blacklistType',
    align: 'center',
  },
  {
    title: '使用性质',
    dataIndex: 'houseType',
    align: 'center',
  },
  {
    title: '是否完成',
    dataIndex: 'isCompleted',
    key: 'isCompleted',
  },
  {
    title: '操作类型',
    dataIndex: 'operType',
    key: 'operType',
  },
  {
    title: '操作人',
    dataIndex: 'reporter',
    key: 'reporter',
  },
  {
    title: '操作时间',
    dataIndex: 'operTime',
    key: 'operTime',
  },
];
const pagination = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    getHouseholdChangeRecordApi({
      page: page,
      limit: pageSize,
      houseID: props.data.houseId,
    }).then((res) => {
      // console.log('res', res);
      changeRecordData.value = res.data.data;
      pagination.total = res.data.count;
    });
  },
});
const handleChangeRecord = () => {
  changeRecord.value = true;
  getHouseholdChangeRecordApi({
    page: pagination.current,
    limit: pagination.pageSize,
    houseID: props.data.houseId,
  }).then((res) => {
    // console.log('res', res);
    changeRecordData.value = res.data.data;
    pagination.total = res.data.count;
  });
};
const changeRecord2 = ref(false);
const changeRecordData2 = ref([]);
const columns2 = [
  {
    title: '面积名称',
    dataIndex: 'areaName',
    key: 'areaName',
    algin: 'center',
  },
  {
    title: '住户类型',
    dataIndex: 'houseType',
    key: 'houseType',
    algin: 'center',
  },
  {
    title: '建筑面积',
    dataIndex: 'buildingArea',
    key: 'buildingArea',
    algin: 'center',
  },
  {
    title: '收费面积',
    dataIndex: 'feeArea',
    key: 'feeArea',
    algin: 'center',
  },
  {
    title: '实供面积',
    dataIndex: 'actualSuppliedArea',
    key: 'actualSuppliedArea',
    algin: 'center',
  },
  {
    title: '阀门厂家',
    dataIndex: 'valveManufacturer',
    key: 'valveManufacturer',
    algin: 'center',
  },
  {
    title: '是否完成',
    dataIndex: 'isCompleted',
    key: 'isCompleted',
  },
  {
    title: '操作类型',
    dataIndex: 'operType',
    key: 'operType',
  },
  {
    title: '操作人',
    dataIndex: 'reporter',
    key: 'reporter',
  },
  {
    title: '操作时间',
    dataIndex: 'operTime',
    key: 'operTime',
  },
];
const pagination2 = reactive({
  total: 0,
  pageSize: 10,
  current: 1,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number) => `共 ${total} 条`,
  onChange: (page: number, pageSize: number) => {
    pagination.current = page;
    pagination.pageSize = pageSize;
    getAreaChangeRecordApi({
      page: page,
      limit: pageSize,
      areaID: props.data.areaId,
    }).then((res) => {
      // console.log('res', res);
      changeRecordData.value = res.data.data;
      pagination.total = res.data.count;
    });
  },
});
const handleChangeRecord2 = () => {
  console.log(props.data)
  changeRecord2.value = true;
  message.error('获取不到面积ID')
  // getAreaChangeRecordApi({
  //   page: pagination.current,
  //   limit: pagination.pageSize,
  //   areaID: props.data.areaId,
  // }).then((res) => {
  //   // console.log('res', res);
  //   changeRecordData.value = res.data.data;
  //   pagination.total = res.data.count;
  // });
};
</script>
<style scoped>
.mr-2 {
  margin-right: 8px;
}
:deep(.ant-form-item) {
  margin-bottom: 20px !important;
}
</style>
